<template>
  <div class="category">
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      @click="$router.push('/home/search')"
      shape="round"
      placeholder="请输入搜索关键词"
    />
    <div class="bottom_box">
      <!-- 左侧导航栏 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="item in categoryListArr"
          :key="item.id"
          :title="item.name"
          @click="onChange(item.id)"
        />
      </van-sidebar>
      <!-- 右边盒子 -->
      <div class="right">
        <img :src="currentCategoryArr.banner_url" alt="" />
        <h5>{{ currentCategoryArr.front_name }}</h5>
        <h3>——{{ currentCategoryArr.name }} ——</h3>
        <van-grid :column-num="3">
          <van-grid-item
            v-for="item in currentCategoryArr.subCategoryList"
            :key="item.id"
            :icon="item.wap_banner_url"
            :text="item.name"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
// 引入全部接口
import { getCartData } from "@/utils/http";
import { getCartFn } from "@/utils/http";
export default {
  name: "Cartgory",
  props: [""],
  data() {
    return {
      value: "", //搜索关键字
      activeKey: 0, //默认的导航索引
      categoryListArr: [], //左侧导航数组
      currentCategoryArr: {}, //当前分类
    };
  },
  components: {},
  methods: {
    onChange(id) {
      // 切换左边测导航
      //   this.activeKey = index;
      console.log(id);
      getCartFn({ id: id })
        .then((res) => {
          // console.log(res);
          this.currentCategoryArr = res.data.data.currentCategory;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getData() {
      getCartData().then((res) => {
        // console.log(res);
        this.categoryListArr = res.data.data.categoryList;
        this.currentCategoryArr = res.data.data.currentCategory;
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>
<style lang='less' scoped>
.category {
  .bottom_box {
    display: flex;
    .right {
      position: relative;
      flex: 1;
      img {
        display: block;
        width: 100%;
        margin-bottom: 20px;
        border-radius: 7px;
        box-shadow: 0 0 10px #000;
      }
      h3 {
        text-align: center;
        margin-bottom: 20px;
      }
      h5 {
        width: 100%;
        color: #fff;
        position: absolute;
        top: 40px;
        left: 0;
        z-index: 222;
        text-align: center;
        font-size: 20px;
      }
    }
  }
}
</style>